<template>
  <div class="login">
    <div>
      <title-go-back :title="title"></title-go-back>
    </div>
    <div class="login_content">
      <div class="phone">
        <div class="label">手机号码</div>
        <div class="phone_number">
          <div>
            <input type="number" @input="phoneNumber" v-model="phone" placeholder="请输入手机号码">
          </div>
          <div class="chahao">
            <span @click="chahao" v-show="chahaoShow" class="iconfont icon-chahao"></span>
          </div>
        </div>
      </div>
      <div class="phone">
        <div class="label">密码</div>
        <div class="phone_number">
          <div>
            <input v-show="passwordLookType === true" type="password" @input="passwordNumber" placeholder="请输入密码"
                   v-model="password">
            <input v-show="passwordLookType === false" type="text" @input="passwordNumber" placeholder="请输入密码"
                   v-model="password">
          </div>
          <div class="chahao">
            <span v-show="passwordLookType === true" @click="passwordLook"
                  class="iconfont icon-icon_chakanmima_guan"></span>
            <span v-show="passwordLookType === false" @click="passwordOpen"
                  class="iconfont icon-icon_chakanmima_kai"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="login_to">登录</div>
    <div class="forget_register">
      <div>忘记密码</div>
      <div>注册</div>
    </div>
  </div>
</template>

<script>

  import TitleGoBack from '../../components/common/TitleGoBack'

  export default {
    name: 'Login',
    data() {
      return {
        phone: ' ',
        state: '',
        password: '',
        title: '登录页面',
        chahaoShow: false,
        passwordLookType: true
      }
    },
    methods: {
      // 监听手机号码
      phoneNumber() {
        let reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;//手机号正则验证
        let phoneNum = this.phone;
        // console.log(this.phone);
        if (reg.test(phoneNum)) {
          return
        }
        if (this.phone !== '') {
          return this.chahaoShow = true;
        } else {
          return this.chahaoShow = false;
        }
      },
      passwordNumber() {

      },
      // 叉号按钮
      chahao() {
        this.phone = '';
        this.chahaoShow = false;
      },
      //查看密码
      passwordLook() {
        this.passwordLookType = false;
      },
      //关闭查看
      passwordOpen() {
        this.passwordLookType = true;
      }
    },
    watch: {},
    components: {
      TitleGoBack
    }
  }
</script>

<style scoped>

  .login a {
    text-decoration: none;
  }

  .login .login_content {
    padding: 10px;
    border-bottom: 1px solid #eee;
  }

  .login .login_content .phone {
    display: flex;

  }

  .login .login_content .phone > div {
    height: 40px;
    line-height: 40px;
  }

  .login .login_content .phone .label {
    width: 25%;
  }

  .login .phone .phone_number {
    display: flex;
    flex: 1;
  }

  .login .phone .phone_number .chahao {
    flex: 1;
    text-align: right;
    color: #999;
  }

  /*input样式*/
  .login .phone input {
    border: none;
    -web-kit-appearance: none;
    -moz-appearance: none;
    outline: 0;
  }

  .login .login_to {
    margin: 10px;
    height: 40px;
    line-height: 40px;
    color: #999;
    background-color: #e8e9eb;
    box-shadow: 0 2px 10px 0 rgba(232, 233, 235, 0.45);
    border-radius: 8px;
    text-align: center;
  }

  .login .forget_register {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    color: #999;
    font-size: 0.8rem;
  }
</style>
